<template>
  <div class="page">
    <headNav centerTitle="订单" rightTitle="" @headBack="headBack"></headNav>
    <div class="main">
        <div class="main-content">
          <div class="listDetail fix">
            <div class="TDStart">
              <p class="fromS">{{trainSelected.dto.fromStation}}</p>
              <p class="fromT">{{trainSelected.dto.fromTime}}</p>
            </div>
            <div class="pause">
              <p class="trainN">{{trainSelected.dto.trainCode}}</p>
              <p class="trainDur">{{trainSelected.dto.costTimeString}}</p>
            </div>
            <div class="TDArrive">
              <p class="fromS">{{trainSelected.dto.arriveStation}}</p>
              <p class="fromT">{{trainSelected.dto.arriveTime}}</p>
            </div>
          </div>
          <div class="title">
            <div class="label fix">
              <!--@click="seatShow=true"-->
              <span class="labelT">{{trainSelected.ticketSeatDtos[priceIndex].seatTypeValue}}<i
                class="iconfont icon-enter" v-show="false"></i></span>
              <p class="input ell">接受无座</p>
              <input type="checkbox" class="accountI" v-model="isAcceptNoSeat" @click="showTip">
              <!--checked="isAcceptNoSeat ? '': 'checked'"-->
            </div>
          </div>
          <div class="title">
            <div class="label fix" @click="travelShow=true">
              <span class="labelT">出行类别</span>
              <p class="input ell">{{travelTypes[0].itemTxt}}</p>
              <i class="iconfont icon-enter rightI active-color"></i>
            </div>
          </div>
          <div class="title">
            <div class="label fix" @click="popupCostCenterVisible=true">
              <span class="labelT">费用归属</span>
              <p class="input ell">{{ cost_selected.name || '请选择费用归属' }}</p>
              <i class="iconfont icon-enter rightI active-color"></i>
            </div>
          </div>
          <div class="title">
            <div class="label fix">
              <span class="labelT">出差事由</span>
              <input class="input res" placeholder="请填写出差事由" v-model="$store.state.train.travelReason"/>
            </div>
          </div>
          <!--添加/修改乘车人-->
          <div class="title">
            <div class="addP fix">
              <div class="addL">
                <h2>添加/修改乘车人</h2>
                <p>请确保姓名证件填写正确</p>
              </div>
              <div class="addR" @click="popupVisible4 = true">选择乘车人</div>
            </div>
            <div class="line"></div>
            <div class="PInfo fix" v-show="PInfoShow" v-for="(passengerItem, i) in passengerAll"
                 v-if="passengerItem.checked">
              <i @click="toggleCheck(passengerItem,null,$event)"
                 class="iconfont icon-shanchu3"></i>
              <span class="name ell">{{passengerItem.name}}</span> <span
              class="card">{{passengerItem.credentialName}}</span>
              <span class="cardID ell">{{passengerItem.credentialNo}}</span>
              <i class="iconfont icon-icon-1 active-color"
                 @click="changePageModifyInfo(i)"></i>
            </div>
          </div>
          <!--在线选座-->
          <div class="title">
            <div class="label fix" @click="choosePlace">
              <span class="labelT">在线选座</span>
              <span class="input ell">{{placeText}}</span>
              <i class="iconfont icon-enter rightI active-color" :style="{color:placeType==3?'#0094db':'#999'}"></i>
            </div>
          </div>
          <!--联系人-->
          <div class="contact">
            <div class="label fix">
              <span class="labelT">联系人</span>
              <input type="text" placeholder="请填写联系人姓名" class="input" v-model="contact.name" maxlength="8">
            </div>
            <div class="label fix">
              <span class="labelT">手机号码</span>
              <input type="text" placeholder="请填写联系手机号" class="input" v-model.trim="contact.mobile" maxlength="11">
            </div>
            <div class="label fix">
              <span class="labelT">邮箱账号</span>
              <input type="text" placeholder="请填写联系人邮箱" class="input" v-model.trim="contact.email">
            </div>
          </div>
        </div>
    </div>

    <div class="footer fix isFixed">
      <div class="footerL" @click="togglePrice">
        <div class="price">
          ￥ {{totalPrice}}
        </div>
        <div class="priceD">
          <span>明细</span> <i class="iconfont" :class="priceDetail ? 'icon-fold':'icon-unfold'"></i>
        </div>
      </div>
      <div @click="submit" class="footerR">
        去付款
      </div>
    </div>
    <!--pop-->
    <!--选择座次类型-->
    <popup v-model="seatShow" position="bottom" class="expensePop" style="background-color: #fff">
      <div v-for="(pop,index) in trainSelected.ticketSeatDtos" class="popItem" :class="{activePop:pop.selected}"
           @click="popActive(index,3)">
        {{pop.seatTypeValue}}<i class="iconfont icon-duihao r" v-show="pop.selected"></i>
      </div>
    </popup>
    <!--选择座位-->
    <popup v-model="placeShow" position="bottom" :closeOnClickModal="false" style="background-color: #fff">
      <div class="seatPop  popItem">
        <div class="popTitle">
          <a class="qLeft" @click="cancelSeat">取消</a>
          <span>可选{{passengerSelected.length}}，已选{{choosedSeat}}</span>
          <a class="rightBtn" @click="chooseSureSeat">确认</a>
        </div>
        <p class="P_prompt">若所选座位无票，系统将自动为您选座出票</p>
        <div class="seat_for">
          <div class="seatCon">
            <span>窗</span>
            <i class="icon-zuowei" :class="{select:seats['1A']}" @click="seatPlace('1A')">A</i>
            <i class="icon-zuowei" :class="{select:seats['1B']}" @click="seatPlace('1B')"
               v-if="seatType == 'SECONDCLASSSEAT'">B</i>
            <i class="icon-zuowei" :class="{select:seats['1C']}" @click="seatPlace('1C')">C</i>
            <span>过道</span>
            <i class="icon-zuowei" :class="{select:seats['1D']}" @click="seatPlace('1D')"
               v-if="seatType == 'FIRSTCLASSSEAT' || seatType == 'SECONDCLASSSEAT'">D</i>
            <i class="icon-zuowei" :class="{select:seats['1F']}" @click="seatPlace('1F')">F</i>
            <span>窗</span>
          </div>
          <div class="seatCon" v-if="passengerSelected.length>1">
            <span>窗</span>
            <i class="icon-zuowei" :class="{select:seats['2A']}" @click="seatPlace('2A')">A</i>
            <i class="icon-zuowei" :class="{select:seats['2B']}" @click="seatPlace('2B')"
               v-if="seatType == 'SECONDCLASSSEAT'">B</i>
            <i class="icon-zuowei" :class="{select:seats['2C']}" @click="seatPlace('2C')">C</i>
            <span>过道</span>
            <i class="icon-zuowei" :class="{select:seats['2D']}" @click="seatPlace('2D')"
               v-if="seatType == 'FIRSTCLASSSEAT' || seatType == 'SECONDCLASSSEAT'">D</i>
            <i class="icon-zuowei" :class="{select:seats['2F']}" @click="seatPlace('2F')">F</i>
            <span>窗</span>
          </div>
        </div>
      </div>
    </popup>
    <!--选择出差申请-->
    <popup v-model="travelShow" position="bottom" class="travelPop" style="background-color: #fff">
      <div v-for="(pop,index) in expenseTravelType.travelTypes" class="popItem" :class="{activePop:pop.selected}"
           @click="popActive(index,1)">
        {{pop.itemTxt}}<i class="iconfont icon-duihao r" v-show="pop.selected"></i>
      </div>
    </popup>
    <!--选择费用归属-->
    <popup v-model="expenseShow" position="bottom" class="expensePop" style="background-color: #fff">
      <div v-for="(pop,index) in expenseTravelType.expenseTree" class="popItem" :class="{activePop:pop.selected}"
           @click="popActive(index,2)">
        {{pop.name}}<i class="iconfont icon-duihao r" v-show="pop.selected"></i>
      </div>
      <!--<div class="popItem otherExpense" @click="otherExpense">使用其他成本核算单元</div>-->
    </popup>
    <!--选择乘机人-->
    <div v-transfer-dom>
      <popup v-model="popupVisible4" height="55%" position="bottom" class="addPpopup" style="background-color: #fff">
        <div class="add fix">
          <div class="add1" @click="addHand">手动添加</div>
          <div class="add2" @click="addPerson">列表选择</div>
        </div>
        <div class="peopleList">
          <!--<scroll :data="passengerAll">-->
            <div>
              <div class="PInfo fix" v-show="PInfoShow" v-for="(passengerItem,index) in passengerAll"
                   @click="toggleCheck(passengerItem,'all')">
                <span class="check iconfont" :class="{'icon-duihao':passengerItem.checked}"></span>
                <span class="name ell">{{passengerItem.name}}</span> <span
                class="card">{{passengerItem.credentialName}}</span>
                <span class="cardID ell">{{passengerItem.credentialNo}}</span>
                <i @click.stop="deletePassenger(index)" class="iconfont icon-shanchu3 right-icon"></i>
              </div>
            </div>
          <!--</scroll>-->
        </div>
      </popup>
    </div>
    <!--价格明细-->
    <popup v-model="priceDetail" position="bottom" class="mint-popup-4 priceDetail" style="background-color: #fff">
      <div class="space">
        {{trainSelected.dto.trainCode}} {{trainSelected.ticketSeatDtos[priceIndex].seatTypeValue}}
      </div>
      <div class="lineP"></div>
      <div class="price">
        <p><span class="type">成人票</span> <span class="unit">￥{{selectSeat.seatPrice}}</span> <span
          class="count">x{{passengerSelected.length}}人</span></p>
        <p><span class="type">服务费</span> <span class="unit">￥{{train.serviceFee}}</span> <span
          class="count">x{{passengerSelected.length}}人</span></p>
      </div>
    </popup>
    <!--订单冲突  行程冲突弹窗  系统异常错误  不能超过5五个人  余票不足 下单前30分钟-->
    <alert v-show="alertShow">
      <div class="shouwan-alert">
        <div>
          <p>{{errName}}</p>
        </div>
        <div class="alert-btn" @click="orderConflict">
          我知道了
        </div>
      </div>
    </alert>
    <!--违规不能创单-->
    <alert v-show="alertShow6b" class="ll">
      <div class="maneyChange">
        <div>
          <p><span v-for="item in errName">{{item}}</span>超出差旅标准</p>
          <p>无法提交订单！</p>
        </div>
        <div class="money-a-btn fix">
          <div class="money-a-cancel" @click="alertTrainList">重新预订</div>
          <div class="money-a-success" @click="orderConflict">取消</div>
        </div>
      </div>
    </alert>
    <cost-to-attribution :visible.sync="popupCostCenterVisible"
                         @selected="selCostCenter"></cost-to-attribution>
    <!--下单前120分钟-->
    <alert v-show="alertShow120" class="ll">
      <div class="maneyChange">
        <div>
          <p>{{errName}}</p>
        </div>
        <div class="money-a-btn fix">
          <div class="money-a-cancel" @click="alertTrainList">重新选择</div>
          <div class="money-a-success" @click="successA">继续预订</div>
        </div>
      </div>
    </alert>
  </div>
</template>
<script>
  import {Toast, MessageBox} from 'mint-ui';
  import {HeadNav,CostToAttribution} from 'wxm-common'
  import alert1 from '../../components/alert.vue'
  import {Popup, TransferDomDirective as TransferDom} from 'vux'
  import {common} from 'wxm-common';
  import train from '@/data/train';

  export default {
    data() {
      return {
        popupCostCenterVisible: false,
        costAttributionSelected: [],
        PInfoShow: true,
        titleBackType: '经济舱',
        popupVisible4: false,
        seatShow: false,//座次选择
        placeShow: false,//座位选择
        travelShow: false,//出差申请
        expenseShow: false,//费用归属
        priceDetail: false,//价格明细
        orderId: "", /*返回的订单ID*/
        errName: ['王', '张'],
        alertShow: false,//订单冲突 价格变动弹窗  行程冲突弹窗  系统异常错误  不能超过5五个人 下单前30分钟 下单前120分钟 余票不足弹窗 未设置职级弹窗 违规能下单 违规不能下单
        submitCode: '',
        alertShow6b: false,//违规不能创单
        alertShow120: false,//下单前120分钟
        alertCode: '',
        seats: {
          '1A': false,
          '1B': false,
          '1C': false,
          '1D': false,
          '1F': false,
          '2A': false,
          '2B': false,
          '2C': false,
          '2D': false,
          '2F': false
        },
        isAcceptNoSeat: true
      }
    },
    directives: {
      TransferDom
    },
    components: {HeadNav,CostToAttribution, alert: alert1, Popup},
    methods: {
      // 费用归属选中类型
      selCostCenter(items) {
        var sel = {};
        if(items.length > 1){
          sel = items[items.length - 1];
        }
        this.$store.state.common.cost_selected = sel;
      },
      changePageModifyInfo(i) {
        var currentPassenger = this.passengerAll[i];
        this.$router.push({
          name: 'addPassenger',
          query: {
            index: i
          }
        });
      },
      headBack() {
        this.$router.go(-1);
      },
      otherExpense() {
        this.expenseShow = false;
        this.$router.push({
          name: 'expenseSelect'
        })
      },
      addPerson() {
        var that = this;
        this.popupVisible4 = false;
        //执行加载动画
        that.$vux.loading.show({
          text: '加载中...'
        })
        //增加乘机人 列表选择 从部门列表中选择拿到数据
        common.getUsersByOrgId(null, (res) => {
          that.$vux.loading.hide();
          that.$store.state.staffList.res = res;
          that.$router.push({
            name: 'staffList',
            params: {}
          });
        }, (err) => {
          that.$vux.loading.hide();
          $trainTool.errorToIndex(that);
        });
      }, //增加乘机人  列表选择
      successA() {
        var footer = document.querySelector('.footer');
        footer.style.zIndex = 99;
        this.alertShow = false;
        this.alertShow120 = false;
        this.payMoney = true;
        if (this.alertCode == 120) {
          this.submit()
        }
      },//价格变动弹窗  确认按钮
      orderConflict() {
        if (this.submitCode == '4a') {
          this.alertTrainList()
        } else {
          this.alertShow = false;
          this.alertShow6b = false;
        }
      },
      alertTrainList() {
        this.alertShow = false;
        this.alertShow6b = false;
        this.alertShow120 = false;
        this.$router.push({
          name: 'trainList',
          params: {
            trainListAjax: true
          }
        });
      },
      showTip() {
        var that = this;
        setTimeout(function () {
          if (!that.isAcceptNoSeat && that.$store.state.train.trainSelected.ticketSeatDtos[that.$store.state.train.priceIndex].seatTypeValue === '无座') {
            that.$vux.alert.show({
              content: '当前车次已无座位',
            })
          }
        }, 20);
      },
      submit() {
        var that = this;

        that.priceDetail = false;

        that.submitCode = '';

        var cost = that.cost_selected;
        var passengerSelected = [];
        for (var p = 0; p < this.passengerSelected.length; p++) {
          var ob = {};
          ob.name = this.passengerSelected[p].name;
          ob.credentialType = this.passengerSelected[p].credentialType;
          ob.credentialNo = this.passengerSelected[p].credentialNo;
          ob.travellerType = this.passengerSelected[p].travellerType;
          ob.gender = 'M';
          /*火车加*/
          ob.userId = this.passengerSelected[p].userId;
          ob.birthday = this.passengerSelected[p].birthday;
          ob.ticketType = 'ADULT';
          ob.costUnitCode = Math.abs(cost.costUnitCode);
          ob.corporationId = cost.corporationId;
          ob.orgId = cost.orgId;
          ob.amount = parseInt(this.trainSelected.ticketSeatDtos[this.priceIndex].seatPrice);
          ob.mobile = '';
          ob.email = '';
          ob.travelCode = this.travelTypes[0].itemCode;
          ob.empLevelCode = this.passengerSelected[p].empLevelCode;
          ob.isPassEmpLevel = this.passengerSelected[p].isPassEmpLevel;
          passengerSelected.push(ob)
        }

        //判断是否超过5个人
        if (passengerSelected.length > 5) {
          that.errName = '定单人数不能超过5位乘客gg';
          that.alertShow = true;
          return
        }

        var orderForm = {};
        orderForm.contactor = this.contact;
        orderForm.passengerList = passengerSelected;
        orderForm.hubsCode = this.trainSelected.dto.hubsCode;
        orderForm.trainCode = this.trainSelected.dto.trainCode;
        orderForm.fromTime = this.$store.state.train.travelTime + ' ' + this.trainSelected.dto.fromTime;
        orderForm.arriveTime = this.$store.state.train.travelTime + ' ' + this.trainSelected.dto.arriveTime;
        var seatPrice = this.trainSelected.ticketSeatDtos[this.priceIndex].seatPrice;
        if (seatPrice != '-' && seatPrice) {
          orderForm.ticketPrice = seatPrice;
        }
        orderForm.fromStation = this.trainSelected.dto.fromStation;
        orderForm.arriveStation = this.trainSelected.dto.arriveStation;
        orderForm.fromCityCode = this.$store.state.train.fromCityCode;
        orderForm.arriveCityCode = this.$store.state.train.toCityCode;
        orderForm.costTime = this.trainSelected.dto.costTime;
        orderForm.seatType = this.seatType;
        orderForm.isAcceptNoSeat = this.isAcceptNoSeat;
        orderForm.illegalReasonList = this.$store.state.illegalReasonList;
        orderForm.illegalPass = this.$store.state.illegalPass;
        orderForm.servicePrice = this.$store.state.train.serviceFee * passengerSelected.length;
        orderForm.travelReason = this.$store.state.train.travelReason;
        //选座信息
        var chooseArr = [];
        var seats = this.seats;
        $.each(seats, function (k, v) {
          if (v) {
            chooseArr.push(k);
          }
        });
        orderForm.chooseSeats = chooseArr.join('') || null;
        orderForm.isChooseSeats = chooseArr.length > 0;

        if (this.alertCode == 120) {
          orderForm.isEnough = true;
          this.alertCode = '';
        }

        if (that.contact.mobile == '') {
          this.$vux.toast.show({
            type: 'text',
            text: '请填写联系人手机号',
            time: 1000
          })
          return
        }

        if (orderForm.passengerList.length === 0) {
          this.$vux.toast.show({
            type: 'text',
            text: '请添加乘车人',
            time: 1000
          })
          return
        } else if (that.contact.name === '') {
          this.$vux.toast.show({
            type: 'text',
            text: '请填写联系人姓名',
            time: 1000
          })
          return
        } else if (that.contact.mobile.checkPhone() == false) {
          this.$vux.toast.show({
            type: 'text',
            text: '手机号有误',
            time: 1000
          })
          return
        } else if (this.contact.email && that.contact.email.checkEmail() == false) {
          this.$vux.toast.show({
            type: 'text',
            text: '邮箱有误',
            time: 1000
          })
          return
        } else {
          if (!that.cost_selected.costUnitCode) {
            this.$vux.toast.show({
              time: 1000,
              type: 'warn',
              text: '请选择费用归属',
              position: 'middle'
            });
            return
          }
          that.$vux.loading.show({
            text: '加载中...'
          })

          train.createOrder(orderForm, function (data) {
            that.$vux.loading.hide();
            var code = data.response.code || '';
            if (code === '') {
              //todo 错误处理
            } else {
              switch (code) {
                case '2':   /*重复订单*/
                  that.alertShow = true;
                  that.errName = data.response.msg;
                  break;
                case '3':  /*行程冲突*/
                  that.alertShow = true;
                  that.errName = data.response.msg;
                  break;
                case '4a':  /*下单前30分钟*/
                  that.alertShow = true;
                  that.errName = data.response.msg;
                  that.submitCode = '4a';
                  break;
                case '4b': /*余票不足*/
                  that.alertShow = true;
                  that.errName = data.response.msg;
                  break;
                case '4c':  /*下单前120分钟*/
                  that.alertShow120 = true;
                  that.errName = data.response.msg;
                  that.alertCode = 120;
                  break;
                case '5':  /*未设置职级的乘客*/
                  that.$store.state.staffList = '';
                  that.$router.push({
                    name: 'setStaffRank'
                  });
                  break;
                case '007':  /*产生违规行为,能创单*/
                  that.$store.state.illegalData = data.response.data;

                  that.$router.push({
                    name: 'illegalReason'
                  });
                  break;
                case '006':  /*产生违规行为,不能创单*/
                  that.errName = data.response.msg;
                  that.alertShow6b = true;
                  break;
                case '7a':    /*创建订单成功*/
                  /*that.$router.push({
                    name: 'pay',
                    query: {
                      orderId: data.response.data
                    }
                  });*/
                  for (var i = 0; i < that.$store.state.passengers.length; i++) {
                    that.$store.state.passengers[i].checked = false;
                  }

                  $jump.toPay(data.response.data);
                  break;
                case '7b':  /*系统繁忙,请稍后再试*/
                  that.alertShow = true;
                  that.errName = data.response.msg;
                  break;
              }
            }
          }, function () {
            that.$vux.loading.hide();
            that.$vux.toast.show({
              type: 'text',
              text: '服务器无响应，请稍后再试',
              time: 1000
            })
          })
        }
      }, /*提交订单*/
      toggleCheck(passenger, type, event) {
        if (event) {
          event.stopPropagation()
        }
        if (type == 'all' && passenger.credentialName != '护照' && passenger.credentialName != '身份证' && passenger.credentialName != '台湾通行证' && passenger.credentialName != '港澳通行证') { //在近期行程人里勾选
          this.$vux.toast.show({
            type: 'text',
            text: '火车下单不支持该证件类型',
            time: 1000
          })
          return
        }
        return passenger.checked = !passenger.checked
      },
      deletePassenger(passenger) {
        this.$store.commit('DELETE_PASSENGER', passenger)
      },
      togglePrice() {
        var footer = document.querySelector('.footer');
        footer.style.zIndex = 2500;
        return this.priceDetail = !this.priceDetail
      },
      addHand() {
        this.$router.push({
          name: 'addPassenger'
        });
      }, /*请求证件类型与常用旅客列表*/
      popActive(index, type) {
        switch (type) {
          case 1:
            for (var i = 0; i < this.expenseTravelType.travelTypes.length; i++) {
              this.expenseTravelType.travelTypes[i].selected = false;
            }
            this.expenseTravelType.travelTypes[index].selected = true;
            this.travelShow = false;
            break;
          case 2:
            for (var k = 0; k < this.expenseTravelType.expenseTree.length; k++) {
              this.expenseTravelType.expenseTree[k].selected = false;
            }
            this.expenseTravelType.expenseTree[index].selected = true;
            this.expenseShow = false;
            break;
          case 3:
            for (var k = 0; k < this.trainSelected.ticketSeatDtos.length; k++) {
              this.trainSelected.ticketSeatDtos[k].selected = false;
            }
            this.trainSelected.ticketSeatDtos[index].selected = true;
            this.seatShow = false;
            this.$store.state.train.priceIndex = index;
            break;
        }
      },
      choosePlace() {
        if (this.placeType == 3) {
          if (this.passengerSelected.length == 0) {
            this.$vux.toast.text('请先选择乘车人');
            return;
          }
          this.placeShow = true;
        }
      },
      cancelSeat() {//取消选座
        var seats = this.seats;
        $.each(seats, function (k, v) {
          if (v) {
            seats[k] = false;
          }
        });
        this.placeShow = false;
      },
      chooseSureSeat() {
        var chooseCount = this.choosedSeat;
        if (chooseCount != 0 && chooseCount != this.passengerSelected.length) {
          //this.alert('请按照乘客人数完成所有选座，或者取消选座！')
          MessageBox({
            title: '',
            message: '请按照乘客人数完成所有选座，<br/>或者取消选座！',
            confirmButtonText: '知道了'
          });
        } else {
          this.placeShow = false;
        }
      },
      seatPlace(seatNo) {//占一个座位
        var passLength = this.passengerSelected.length;
        var seats = this.seats;
        if (seats[seatNo]) {
          seats[seatNo] = false;
          return;
        }

        if (passLength == 1) {
          this.emptySeat();
          seats[seatNo] = true;
        } else if (passLength > 1) {
          var choosedSeat = 0;
          $.each(seats, function (k, v) {
            if (v) {
              choosedSeat++;
            }
          });
          if (passLength > choosedSeat) {
            seats[seatNo] = true;
          }
        }
      },
      emptySeat() {//清空座位
        var seats = this.seats;
        $.each(seats, function (k, v) {
          if (v) {
            seats[k] = false;
          }
        });
      }
    },
    mounted() {
      this.$store.state.entryCode = 3;//用来区分机票酒店火车票填单页的
      this.$store.state.headNav.back = 'trainListDetail';
      this.isAcceptNoSeat = !this.$store.state.train.isAcceptNoSeat;
      if (this.$store.state.illegalReason) {
        this.$store.state.illegalReason = false;
        this.submit();
      }
    },
    beforeMount() {
      if (!this.trainSelected.dto) {
        this.$router.push({name:'train'});
      }
    },
    computed: {
      cost_selected(){
        return this.$store.state.common.cost_selected;
      },
      recentPassengerList() {
        return this.$store.state.recentPassengerList
      }, /*上次订单乘机人*/
      passengerSelected() {
        this.$store.state.passengerSelected = this.$store.state.passengers.filter(todo => todo.checked)
        return this.$store.state.passengerSelected
      },
      passengerAll() {
        return this.$store.state.passengers
      },
      /*passengers(){
       return this.$store.state.passengers
       },*/
      train() {
        return this.$store.state.train
      },
      trainSelected() {
        return this.$store.state.train.trainSelected
      }, /*被选中的车次信息*/
      index() {
        return this.$store.state.train.index
      },
      priceIndex() {
        return this.$store.state.train.priceIndex
      },
      totalPrice() {
        var n = this.passengerSelected.length;
        var unit = this.$store.state.train.selectSeat.seatPrice;//单价

        var serviceFee = this.$store.state.train.serviceFee;//服务费单价


        serviceFee = serviceFee ? serviceFee : 0;

//        serviceFee = serviceFee  ||  0 ;

//        serviceFee == undefined &&   (serviceFee = 0) ;

        var total = (unit + serviceFee) * n;
        return total
      },
      seatType() {
        return this.trainSelected.ticketSeatDtos[this.priceIndex].seatType;
      },
      selectSeat() {
        return this.$store.state.train.selectSeat
      },
      expenseTravelType() {
        return this.$store.state.expenseTravelType
      },
      expenseTree() {
        var ob = this.$store.state.expenseTravelType.expenseTree.filter(todo => todo.selected);
        return ob
      },
      travelTypes() {
        var ob = this.$store.state.expenseTravelType.travelTypes.filter(todo => todo.selected);
        // 处理 'Cannot read property 'itemTxt' of undefined' BUG
        return ob && ob.length > 0 ? ob : [{itemTxt: ''}]
      },
      contact() {
        return this.$store.state.contact
      },
      placeType() {
        var type = null;
        var firstLetter = this.trainSelected.dto.trainCode.substring(0, 1);
        if (firstLetter == 'C' || firstLetter == 'D' || firstLetter == 'G') {
          var seatType = this.seatType;
          if (seatType == 'FIRSTCLASSSEAT' || seatType == 'SECONDCLASSSEAT' || seatType == 'SUPERSEAT' || seatType == 'BUSINESSSEAT') {
            type = 3;
          } else {
            type = 2;
          }
        } else {
          type = 1;
        }
        return type;
      },
      choosedSeat() {
        var seats = this.seats;
        var count = 0;
        $.each(seats, function (k, v) {
          if (v) {
            count++;
          }
        });
        return count;
      },
      placeText() {
        var rs = null;
        if (this.placeType == 1) {
          rs = '此列车不可选座';
        } else if (this.placeType == 2) {
          rs = '此座次不可选座';
        } else if (this.placeType == 3) {
          var chooseArr = [];
          var seats = this.seats;
          $.each(seats, function (k, v) {
            if (v) {
              chooseArr.push(k);
            }
          });
          if (chooseArr.length > 0) {
            rs = chooseArr.join(',');
          } else {
            rs = '支持在线选座服务';
          }
        }
        return rs;
      }
    },
    watch: {
      passengerSelected: function (v) {
        this.emptySeat();
      },
      placeType: function (v) {
        if (v != 3) {
          this.emptySeat();
        }
      },
      seatType: function (v) {
        this.emptySeat();
      },
      isAcceptNoSeat: function (val) {
        this.$store.state.train.isAcceptNoSeat = val;
      }
    }
  }
</script>

<!--员工尚未设置职级-->
<style scoped>
  /*.main {
    position: relative;
    height: calc(100% - 5rem);
    overflow: auto;
  }*/

  .main{
    height:100%;
    padding-bottom: 2.5rem;
  }

  .alertShow {
    width: 12.5rem;
    text-align: center;
    font-size: .75rem;
  }

  .staffRankIco {
    margin: .375rem 0 .5rem 0;
  }

  .staffRankInfo {
    line-height: 1rem;
  }

  .staffRankBtn {
    color: #0094db;
    border-top: 1px solid #ccc;
    line-height: 2.5rem;
    margin-top: .5rem;
    font-size: .9rem;
  }

  .icon-gantanhao {
    color: #0094db;
  }
</style>
<!--售完弹窗-->
<style scoped>
  .shouwan-alert {
    width: 15rem;
    margin-top: 1.25rem;
    font-size: .8rem;
  }

  .shouwan-alert p {
    margin-bottom: 1rem;
    font-size: .8rem;
  }

  .alert-btn {
    color: #0094db;
    border-top: 1px solid #ccc;
    line-height: 2.5rem;
    height: 2.5rem;
    font-size: .9rem;
  }

</style>

<!--价格变动弹窗-->
<style scoped>
  .maneyChange {
    width: 15rem;
    /*height: 300px;*/
    margin-top: 1.25rem;
    font-size: .8rem;
  }

  .maneyChange p {
    margin-bottom: 1rem;
    font-size: .8rem;
  }

  .maneyChange .money-a-btn {
    color: #0094db;
    border-top: 1px solid #ccc;
    line-height: 2.5rem;
    height: 2.5rem;
    font-size: .9rem;
  }

  .money-a-cancel {
    float: left;
    width: 50%;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
  }

  .money-a-success {
    float: right;
    width: 50%;
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  .page {
    height: 100%;
    background-color: #f7f7f7;
    box-sizing: border-box;
    overflow: auto;
  }

  .mint-popup-bottom {
    width: 100%;
  }

  .popItem {
    line-height: 2.5rem;
    width: 100%;
    border-bottom: 1px solid #eee;
    font-size: .75rem;
    box-sizing: border-box;
    padding: 0 1.2rem;
  }

  .icon-duihao {
    font-size: .9rem;
  }

  .travelPop, .expensePop {
    max-height: 15rem;
    overflow: auto;
    z-index: 3000 !important;
  }

  .activePop, .active-color {
    color: #46a1bb!important;
  }

  .addP {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 3.25rem;
    padding: .9rem .5rem 0 .5rem;
  }

  .addL {
    position: relative;
    float: left;
    text-align: left;
    h2 {
      font-size: .75rem;
      color: #333333;
      margin-bottom: .25rem;
    }
    p {
      font-size: .55rem;
      color: #999999;
    }
  }

  .addR {
    text-align: center;
    position: relative;
    float: right;
    border-radius: .125rem;
    font-size: .75rem;
    color: white;
    background-color: #46a1bb;
    width: 4.65rem;
    height: 1.6rem;
    line-height: 1.6rem;
  }

  .line {
    height: 1px;
    background-color: #eee;
    width: 100%;
    margin: 0 auto;
  }

  .lineP {
    height: 1px;
    background-color: #eee;
  }

  .peopleList {
    position: relative;
    height: calc(100% - 2rem);
    overflow: scroll;
    box-sizing: border-box;
    .name {
      margin-left: 0 !important;
    }
  }
  .peopleList::-webkit-scrollbar {
    display: none;
  }

  .PInfo {
    padding: 0 .5rem;
    font-size: 0;
    text-align: left;
    border-bottom: 1px solid #eee;
    .name {
      margin-left: 1rem;
      height: 3rem;
      margin-right: .5rem;
      font-size: .7rem;
      display: block;
      float: left;
      line-height: 3rem;
    }
    .card {
      height: 3rem;
      font-size: .7rem;
      display: block;
      float: left;
      line-height: 3rem;
      vertical-align: top;
      margin-right: .5rem;
    }
    .cardID {
      height: 3rem;
      font-size: .7rem;
      display: inline-block;
      line-height: 3rem;
      margin-right: .5rem;

    }
    i.icon-shanchu3 {
      display: inline-block;
      position: absolute;
      left: .5rem;
      height: 3rem;
      line-height: 3rem;
      font-size: .75rem;
      color: #ce1b1b;
    }
    i.icon-icon-1 {
      padding: 0 .5rem 0 1rem;
      display: inline-block;
      position: absolute;
      right: 0;
      height: 3rem;
      line-height: 3rem;
      font-size: 1.5rem;
      color: #0094db;
    }
    .check {
      display: inline-block;
      float: left;
      vertical-align: top;
      font-size: .8rem;
      width: .8rem;
      height: .8rem;
      border: 1px solid #eee;
      margin: 1.05rem .25rem 0 0;
      border-radius: 0;
    }
    .icon-duihao {
      color: #0094db;
    }
  }
  .PInfo:last-child {
    border: none;
  }
  .contact {
    margin: 0 .25rem .5rem .25rem;
    border-radius: .125rem;
    > .label {
      border-bottom: 1px solid #eee;
    }
  }

  .addPpopup {
    height: 55%;
    width: 100%;
    overflow: auto;
    background-color: white;
    .titleP {
      box-sizing: border-box;
      padding: 0 .6rem;
      font-size: .8rem;
      color: #333333;
      .cancel {
        position: relative;
        float: left;
        height: 2.35rem;
        line-height: 2.35rem;
      }
      .sure {
        position: relative;
        float: right;
        height: 2.35rem;
        line-height: 2.35rem;
      }
    }
    .add {
      display: flex;
      margin: .3rem 0;
      font-size: .75rem;
      height: 2rem;
      line-height: 2rem;
      color: white;
      box-sizing: border-box;
      .add1 {
        background-color: #0094db;
        width: 47%;
        margin-left: 2%;
        margin-right: 2%;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        box-sizing: border-box;
        border-radius: .125rem;
      }
      .add2 {
        background-color: #0094db;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        width: 47%;
        border-radius: .125rem;
      }
    }
  }

  .priceDetail {
    padding-bottom: 2.5rem;
    width: 100%;
    .space {
      height: 2.5rem;
      line-height: 2.5rem;
      padding: 0 .5rem;
      color: #333333;
      font-size: .75rem;
      font-weight: bold;
    }
    .price, .insurance {
      padding: .5rem .5rem 0 .5rem;
      p {
        margin-bottom: .5rem;
        .type {
          color: #333333;
          font-size: .75rem;
        }
        .unit {
          color: #f60;
          font-size: .75rem;
          margin-left: 2.5rem;
          display: inline-block;
          width: 7.5rem;
        }
        .count {
          color: #f60;
          font-size: .75rem;
          margin-left: .75rem;
        }
      }
    }
    .insurance {

    }
  }

  .label {
    text-align: left;
    background-color: white;
    padding: 0 .5rem;
    font-size: 0;
    position: relative;
    line-height: 2.65rem;
    span {
      display: block;
      font-size: .75rem;
      width: 3.5rem;
      height: 2.65rem;
      color: #333333;
      float: left;
    }
    .input {
      display: block;
      width: calc(100% - 3.5rem);
      padding-left: .5rem;
      font-size: .75rem;
      border: none;
      height: 2.65rem;
      font-size: .7rem;
      color: #666;
      box-sizing: border-box;
      float: left;
    }
    .rightI {
      position: absolute;
      right: .5rem;
      font-size: .8rem;
      color: #0094db;
      height: 2.65rem;
    }
    div {
      position: relative;
      display: inline-block;
    }
  }

  .accountPay {
    font-size: .75rem;
    color: #333333;
    display: inline-block;
    height: 2.65rem;
    line-height: 2.65rem;
  }

  input.accountI {
    position: absolute;
    right: .5rem;
    top: .85rem;
    font-size: .8rem;
    width: .8rem;
    height: .8rem;
    border: 1px solid #eee;
    margin: 0;
    border-radius: 0;
  }

  .footer {
    width: 100%;
    z-index: 101;
    .footerL {
      background-color: white;
      width: 50%;
      height: 2.5rem;
      position: relative;
      float: left;
      box-sizing: border-box;
      padding: 0 1rem;
      border-top: 1px solid #eee;
      .price {
        position: relative;
        float: left;
        color: #f60;
        font-size: .85rem;
        height: 2.5rem;
        line-height: 2.5rem;
      }
      .priceD {
        position: relative;
        float: right;
        font-size: .55rem;
        height: 2.5rem;
        line-height: 2.5rem;
        color: #999;
      }
      .icon-unfold {
        vertical-align: sub;
      }

    }
    .footerR {
      width: 50%;
      position: relative;
      float: left;
      color: white;
      font-size: .9rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      background-color: #46a1bb;
    }
  }
  .isFixed {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
  }
  .listDetail {
    line-height: 1;
    display: flex;
    margin: .5rem .3rem;
    padding: .75rem 0;
    background-color: white;
    .TDStart {
      flex: 0 0 35%;
      text-align: center;
      color: #333333;
      .fromS {
        font-size: .75rem;
        margin-bottom: 1.4rem;
      }
      .fromT {
        font-size: .9rem;
      }
    }
    .TDArrive {
      flex: 0 0 35%;
      text-align: center;
      color: #333333;
      .fromS {
        font-size: .75rem;
        margin-bottom: 1.4rem;
      }
      .fromT {
        font-size: .9rem;
      }
    }
    .pause {
      flex: 0 0 30%;
      text-align: center;
      background: url("../../assets/images/trainDetailBg1.png") no-repeat center center;
      background-size: 100%;
      .trainN {
        font-size: .55rem;
        margin-bottom: 1.85rem;
      }

      .trainDur {
        font-size: .55rem;
      }
    }
    .listDate {
      width: 100%;
      color: #0094db;
      font-size: .6rem;
      .pre {
        position: relative;
        float: left;
        width: 4.5rem;
        height: 2rem;
        line-height: 2rem;
        .icon-llmainpageback {
          font-size: .6rem;
        }
      }
      .date {
        width: 8.25rem;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        position: relative;
        float: left;
      }
      .next {
        position: relative;
        float: left;
        width: 4.5rem;
        text-align: right;
        height: 2rem;
        line-height: 2rem;
        .icon-enter {
          font-size: .6rem;
        }
      }
    }
    .listItem {
      width: 100%;
      color: #333333;
      font-size: .75rem;
      position: relative;
      .seat {
        width: 4rem;
        height: 2.5rem;
        line-height: 2.5rem;
        position: relative;
        float: left;
      }
      .seatN {
        width: 6rem;
        text-align: center;
        height: 2.5rem;
        line-height: 2.5rem;
        position: relative;
        float: left;
      }
      .seatP {
        height: 2.5rem;
        line-height: 2.5rem;
        position: relative;
        float: left;
        width: 4.75rem;
        padding-left: 1.25rem;
        text-align: left;
        color: red;
      }
      .yuding {
        width: 2.5rem;
        height: 1.25rem;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 1.25rem;
        border-radius: .2rem;
        position: absolute;
        margin-top: 1.25rem;
        transform: translateY(-50%);
        right: 0;
      }

    }
    .backRule {
      font-size: .75rem;
      color: #0094db;
    }
  }

  .title {
    text-align: center;
    background-color: #fff;
    width: 97.33%;
    margin: 0 .25rem;
    border-bottom: 1px solid #eee;
    border-radius: .125rem;
  }

  .titleDate {
    font-size: .75rem;
    text-align: left;
    padding: .65rem .5rem;
  }

  .title1 {
    line-height: 1.5rem;
    font-size: 1.15rem;
  }

  .title1 p {
    float: left;
  }

  .title2 {
    line-height: 1.25rem;
  }

  .title3 {
    line-height: 1.25rem;
  }

  .titleGoDate {
    width: 4.5rem;
    margin-left: 1.5rem;
  }

  .titleBackDate {
    width: 4.5rem;
    margin-right: 1.5rem;
  }

  .titleLineMiddle {
    width: 6.25rem;
    height: 1.5rem;
    background: url("../../assets/images/goBackLine.png") no-repeat center;
  }

  .titleGoCity {
    width: 6.5rem;
    float: left;
    margin-left: .5rem;
  }

  .titleBackCity {
    width: 6.5rem;
    float: right;
    margin-right: .5rem;
  }

  .titleGoType {
    width: 7rem;
    float: left;
    margin-left: .25rem;
  }

  .titleLineInfo {
    float: left;
    width: 3.75rem;
  }

  .titleBackType {
    width: 7rem;
    float: right;
    margin-right: .25rem;
  }

  .Sfixed {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    z-index: 9999;
    background: #FFFFFF;
    transform: translate3d(-50%, 0, 0);
  }

  .popTitle {
    line-height: 2.6;
    padding: 0;
    font-size: .75rem;
    letter-spacing: .125rem;
    margin: 0 -1.2rem;
    text-align: center;
    background: #0094db;
    color: #FFFFFF;
  }

  .popTitle span {
    display: inline-block;
    width: 60%;
  }

  .P_prompt {
    padding: 0;
    margin: 0 -1.2rem;
    text-align: center;
    line-height: 2.6;
    font-size: .6rem;
    color: #666;
    background: #fff7de;
  }

  .seatCon {
    margin-bottom: 25px;
    font-size: .7rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    line-height: 1.25rem;
  }

  .icon-zuowei {
    color: #555555;
    font-size: .6rem;
    font-style: normal;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    background: url("../../assets/images/seat_default.png") no-repeat center;
    background-size: 100%;
  }

  .icon-zuowei.select {
    background: url("../../assets/images/seat_select.png") no-repeat center;
    background-size: 100%;
  }

  .seat_for {
    padding-top: .75rem;
    padding-bottom: .125rem;
  }

  .rightBtn {
    width: 20%;
    display: inline-block;
    float: right;
  }

  .qLeft {
    width: 18%;
    display: inline-block;
  }

  .right-icon {
    left: auto !important;
    right: .5rem !important;
  }
</style>


<style scoped>
  .otherExpense {
    color: #0a628f;
  }
</style>
